import React, { useState, useEffect } from "react";
import {useSelector} from 'react-redux'
import myaxios from "../../../axios/axiosattention";
import MP from "../../../api/Map";
/* 导入store */
import store from '../../../redux/store'
import {AcollectAction,RcollectAction} from '../../../redux/actions/collectAction'
import "../../../styles/Attention/detail.scss";
/* 引入轮播图组件 */
import Swiper from "./Swiper/swiper";

/* props 获取路由信息 */
function Detail(props) {
  let state = useSelector((state)=>state)
 console.log(state);
  let [id,setId] = useState('')
  /* 收藏的显示和不显示 */
  let [show,setShow] = useState(false)

  let [data, setData] = useState([]);
  useEffect(() => {
     //获取上一个页面传过来的ID 
    let urlId = props.location.search.split("=")[1]
    setId(urlId)

    /* 请求数据 */
    myaxios.get("276089/recommend/list").then((res) => {
      let result = res.txt_list;
      setData(result);
    });

    MP("aZ5Zj0DATZ8Xu1hHw6KXBogC4lp6pjSY").then((BMap) => {
      var map = new BMap.Map("allmap"); // 创建Map实例
      var point = new BMap.Point(116.404, 39.915); // 创建点坐标
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker);
      map.centerAndZoom("北京", 15);
      map.enableScrollWheelZoom(); //启用滚轮放大缩小
    });
  }, []);

  /* 路由返回 */
  function goBack() {
    // console.log(props);
    props.history.goBack();
  }

  /* 点击收藏 */
  function goCollect() {
    setShow(!show)
    /* 给reducer发送action */
    if({show}){
      store.dispatch(AcollectAction(id))
    }else{
      store.dispatch(RcollectAction(id))
    }
    
  }

  return (
    <div className="detail">
      {/* 顶部开始 */}
      <header>
        <div className="header-left">
          <i className="iconfont" onClick={goBack}>
            &#xe601;
          </i>
        </div>
        <div className="header-txt">
          <b>安选PLUS</b>
          <p className="header-txt-p">
            <span>真实在售</span>
            <span>无忧交易</span>
          </p>
        </div>
        <div className="header-right">
          <i className={show?"iconfont show" : "iconfont"} onClick={goCollect}>&#xe616;</i>&nbsp;
          <i className="header-right-icon iconfont">&#xe626;</i>
        </div>
      </header>
      {/*  内容区域开始*/}
      <section className="detail-content">
        <div className="detail-content">
          <div className="detail-content-top">
            上学的不二选择，锦绣花园，精装两房，户型周正，适合居家
          </div>
          <div className="detail-content-price">
            <b>303万</b> <b>2室2厅1卫</b> <b>75m²</b>
          </div>
          {/* 轮播图 */}
          <Swiper value={data}></Swiper>
          <div className="datail-content-msg"></div>
          <div className="detail-info">
            <ul>
              <li>
                <span className="detail-info-span">单价</span>40400元/m²
              </li>
              <li>
                <span className="detail-info-span">楼层</span>中层(共88层)
              </li>
              <li>
                <span className="detail-info-span">朝向</span>南北
              </li>
              <li>
                <span className="detail-info-span">装修</span>精装修
              </li>
              <li>
                <span className="detail-info-span">预算</span>
                最低首付90.9万，月供11256元
              </li>
              <li>
                <span className="detail-info-span">小区</span>锦绣花园(龙华
                龙华)
              </li>
              <li>
                <span className="detail-info-span">轨交</span>
                4号线龙华-步行651米
              </li>
            </ul>
          </div>
          {/* 百度地图 */}

          <div id="allmap"></div>
        </div>
      </section>
    </div>
  );
}

export default Detail;
